import { Button, Radio, Space, Table } from 'antd';
import { useState, useEffect } from 'react'
import LittleTitle from '../../../../../../common/LittleTitle';
import _ from 'lodash';
import useBusinessMap from '../../../../../../common/BusinessMap/useBusinessMap';
import rangeDisplayIcon from '../../../Jcyj/rangeDisplayIcon';

export default function CztzhfxResult(props) {
    const map = useBusinessMap();
    const { result, onUpdate } = props;
    // console.log('result', result)
    const [type, setType] = useState('cztfx');
    //const [b, setB] = useState();

    const handleClick = (record) => {
        const cztxl = record.cztxl;
        const wkt = result?.geom;
        if (cztxl && wkt) {
            onUpdate(cztxl, wkt);
        } else {
            alert("无效的参数！")
        }
        //console.log('cztxl', cztxl)
    }
    /* 
    --下面这个钩子函数用于范围内各种'承灾体'、'减灾资源'在地图是显示，与'监测预警'使用同函数，函数在'监测预警'文件夹下，监测点、预警信息、隐患点数据暂无
    --rangeDisplayIcon(data, circle, map, ypType);
    --↓
    */
    useEffect(() => {
        console.log("9", result, type)
        let data, wkt = result.geom, ypType = type;
        data = result.data.map(e => ({ name: e.cztxl }));
        rangeDisplayIcon(data, _, map, ypType, wkt);
        return () => {
            const allLayers = map.getLayers().getArray();
            [...allLayers].forEach(l => {
                if (l?.get("layerName") === 'rangeDisplayIcon')
                    map.removeLayer(l);
            })
        }
    }, [result, type, map])
    /* 
    --↑
    */
    return <div style={{
        padding: "0 12px"
    }}>
        {/* <Radio.Group>
            <Radio.Button>承灾体</Radio.Button>
            <Radio.Button>减灾资源</Radio.Button>
        </Radio.Group> */}
        <LittleTitle>分析概要</LittleTitle>
        <div style={{
            margin: "8px 0 16px 0"
        }}>
            <div style={{
                // textAlign: "center"  
            }}>
                该区域共有承灾体
                <span style={{
                    fontWeight: "bold",
                    color: '#f50',
                    padding: "0 3px"
                }}>{_.sumBy(result.data, 'count')}</span>
                处
            </div>
        </div>

        <LittleTitle>结果详情</LittleTitle>
        <Space direction='vertical' style={{
            marginTop: 8,
            width: '100%'
        }}>
            <Table bordered size="small" dataSource={result?.data} columns={[{
                dataIndex: 'cztxl',
                title: '类型',
                width: 160,
                ellipsis: true
            }, {
                title: '数量',
                dataIndex: 'count',
                align: 'center'
            }, {
                width: 80,
                align: "center",
                render: (a, record) => {

                    return <Button type="link" size="small" onClick={() => { handleClick(record) }} >详情</Button>
                }
            }]} pagination={{
                pageSize: 10
            }} />
        </Space>
    </div>;
}